<template>
    <div class="picture">
        <div v-if="loading" v-loading="loading" class="empty-state">
        </div>
        <div v-else-if="projectList.length > 0" class="data">
            <div v-for="project in projectList" :key="project.projectName" class="project-section">
                <div class="project-title" @click="toggleProject(project.projectName)">
                    {{ project.projectName }}
                    <el-icon :class="{'rotate-icon': expandedProjects.includes(project.projectName)}">
                        <ArrowRight />
                    </el-icon>
                </div>
                <el-collapse-transition>
                    <div v-show="expandedProjects.includes(project.projectName)">
                        <el-table size="small" v-loading="loading" :data="project.items" class="project-table">
                            <el-table-column label="标题" width="260">
                                <template #default="{ row }">
                                    <div @click="showDetail(row)" style="cursor: pointer;">
                                        <span v-if="row.user_bug" style="background-color:rgb(245, 108, 108);border-radius:4px; color: white;font-size: 10px;padding: 5px;margin-right: 5px;"> BUG</span>
                                        <span v-if="row.user_need" style="background-color:rgb(53, 130, 251);border-radius:4px; color: white;font-size: 10px;padding: 5px 2px;margin-right: 5px;"> NEED</span>
                                        {{ row.title}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template #default="{ row }">
                                    <el-popover 
                                        v-if="!['已实现', '已拒绝', '已解决'].includes(row.status)"
                                        placement="bottom"
                                        :width="150"
                                        trigger="click">
                                        <template #reference>
                                            <div v-if="row.user_need">
                                                <el-button v-if="row.status === '规划中'"
                                                    style="font-style:consolar;color:#67c23a;" type="success" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '实现中'"
                                                    style="font-style:consolar;color:#79bbff;" type="primary" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已拒绝'"
                                                    style="font-style:consolar;color:red;" type="danger" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已实现'"
                                                    style="font-style:consolar;color:#67c23a;" type="success" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                            </div>
                                            <div v-else>
                                                <el-button v-if="row.status === '新'"
                                                    style="font-style:consolar;color:#67c23a;" type="success" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '接受/处理'"
                                                    style="font-style:consolar;color:#79bbff;" type="success" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已解决'"
                                                    style="font-style:consolar;color:#67c23a;" type="success" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已拒绝'"
                                                    style="font-style:consolar;color:red;" type="danger" plain round class="custom-button">
                                                    {{ row.status }}
                                                </el-button>
                                            </div>
                                        </template>
                                        <div class="pop-content">
                                            <div v-if="row.user_need" style="display: flex;flex-direction: column;align-items: center;">
                                                <el-button v-if="row.status === '规划中'" @click="changeStatus(row,'实现中')">实现中</el-button>
                                                <el-button v-if="row.status === '规划中'" @click="changeStatus(row,'已实现')">实现</el-button>
                                                <el-button v-if="row.status === '规划中'" @click="changeStatus(row,'已拒绝')">拒绝</el-button>
                                                <el-button v-if="row.status === '实现中'" @click="changeStatus(row,'已实现')">实现</el-button>
                                                <el-button v-if="row.status === '实现中'" @click="changeStatus(row,'已拒绝')">拒绝</el-button>
                                            </div>
                                            <div v-else style="display: flex;flex-direction: column;align-items: center;">
                                                <el-button v-if="row.status === '新'" @click="changeBug(row,'接受/处理')">接受/处理</el-button>
                                                <el-button v-if="row.status === '新'" @click="changeBug(row,'已解决')">解决</el-button>
                                                <el-button v-if="row.status === '新'" @click="changeBug(row,'已拒绝')">拒绝</el-button>
                                                <el-button v-if="row.status === '接受/处理'" @click="changeBug(row,'已解决')">解决</el-button>
                                                <el-button v-if="row.status === '接受/处理'" @click="changeBug(row,'已拒绝')">拒绝</el-button>
                                            </div>
                                        </div>
                                    </el-popover>
                                    <div v-else>
                                        <div v-if="row.user_need">
                                            <el-button v-if="row.status === '已实现'"
                                                style="font-style:consolar;color:#67c23a;" type="success" plain round class="custom-button"
                                                @click="showFinalStateMessage('需求')">
                                                {{ row.status }}
                                            </el-button>
                                            <el-button v-if="row.status === '已拒绝'"
                                                style="font-style:consolar;color:red;" type="danger" plain round class="custom-button"
                                                @click="showFinalStateMessage('需求')">
                                                {{ row.status }}
                                            </el-button>
                                        </div>
                                        <div v-else>
                                            <el-button v-if="row.status === '已解决'"
                                                style="font-style:consolar;color:#67c23a;" type="success" plain round class="custom-button"
                                                @click="showFinalStateMessage('缺陷')">
                                                {{ row.status }}
                                            </el-button>
                                            <el-button v-if="row.status === '已拒绝'"
                                                style="font-style:consolar;color:red;" type="danger" plain round class="custom-button"
                                                @click="showFinalStateMessage('缺陷')">
                                                {{ row.status }}
                                            </el-button>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="优先级" prop="priority">
                                <template #default="{ row }">
                                    <el-popover
                                        placement="bottom"
                                        :width="200"
                                        trigger="click">
                                        <template #reference>
                                            <el-button style="width:4vw" text v-if="row.priority === ''">-</el-button>
                                            <el-button style="width:4vw" type="info" v-if="row.priority === 'Low'">{{ row.priority}}</el-button>
                                            <el-button style="width:4vw" type="success" v-if="row.priority === 'Middle'">{{ row.priority}}</el-button>
                                            <el-button style="width:4vw" type="danger" v-if="row.priority === 'High'">{{ row.priority}}</el-button>
                                        </template>
                                        <div v-if="row.user_need" class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                            <el-button @click="changeStatus(row,row.status,'')">空</el-button>
                                            <el-button @click="changeStatus(row,row.status,'Low')">Low</el-button>
                                            <el-button @click="changeStatus(row,row.status,'Middle')">Middle</el-button>
                                            <el-button @click="changeStatus(row,row.status,'High')">High</el-button>
                                        </div>
                                        <div v-else class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                            <el-button @click="changeBug(row,row.status,'')">空</el-button>
                                            <el-button @click="changeBug(row,row.status,'Low')">Low</el-button>
                                            <el-button @click="changeBug(row,row.status,'Middle')">Middle</el-button>
                                            <el-button @click="changeBug(row,row.status,'High')">High</el-button>
                                        </div>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="预计结束">
                                <template #default="{ row }">
                                    {{ formatTime(row.createdAt) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="处理人">
                                <template #default="{ row }">
                                    <svg style="position: relative;top: 5px;left: -5px;" t="1714220202901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="22" height="22"><path d="M512 51.2a460.8 460.8 0 1 1 0 921.6A460.8 460.8 0 0 1 512 51.2zM433.088 192.64c-3.712 0.192-8.896 0.448-13.632 1.728-11.904 3.072-15.104 10.624-16 14.784-1.344 7.104 1.088 12.544 2.688 16.128 0.256 0.512 0.512 1.152 0 2.88a54.272 54.272 0 0 1-11.2 11.456c-1.216 1.024-30.144 25.984-31.808 58.688a291.84 291.84 0 0 0 1.152 90.176c0.32 1.472 0.64 3.648 0 5.12-5.44 4.992-11.648 10.432-11.648 23.104 0.064 1.28 1.856 31.552 20.8 58.112 4.352 6.144 10.048 12.416 16.064 19.008 19.2 21.12 43.008 47.36 47.04 91.776 1.6 17.472 0.768 24 0.448 25.728l-0.64 1.28-0.384 1.344c0 0.128-3.648 9.408-44.544 19.84-23.68 6.08-46.912 9.152-47.616 9.28-30.208 5.12-55.68 14.144-75.904 26.88-15.808 9.6-29.056 22.912-38.72 38.656-14.528 24.256-14.08 46.272-13.888 50.304v14.4a12.16 12.16 0 0 0 12.352 12.032h568.768a12.16 12.16 0 0 0 12.352-12.032v-14.336a90.24 90.24 0 0 0-13.376-49.728 117.12 117.12 0 0 0-38.72-38.592c-20.16-12.8-45.824-22.016-76.928-27.712-0.256 0-23.296-3.072-46.912-9.088-41.088-10.496-44.672-19.776-44.8-19.84a11.904 11.904 0 0 0-0.96-2.688c-0.32-1.728-1.152-8.256 0.448-25.728 4.032-44.416 27.84-70.592 46.976-91.712 6.016-6.656 11.712-12.928 16.128-19.072 11.968-17.408 19.136-37.632 20.8-58.688a31.296 31.296 0 0 0-1.408-9.792 29.888 29.888 0 0 0-7.936-12.032l-1.728-1.92c-0.192-0.192-0.704-0.768-0.256-3.776 1.728-10.944 2.688-20.224 3.2-28.992a281.6 281.6 0 0 0-2.496-61.824 94.208 94.208 0 0 0-2.688-12.864 101.376 101.376 0 0 0-20.672-40.192l-1.28-1.28c-7.808-7.552-50.176-43.2-155.712-51.072a376.128 376.128 0 0 0-47.36 0.256z" p-id="7486" fill="#8a8a8a"></path></svg>
                                    <span v-for="handler in row.handlerArray" :key="handler.id">{{ handler.realName}};</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="处理时间">
                                <template #default="{ row }">
                                    {{ formatTime(row.createdAt) }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-transition>
            </div>
        </div>
        <div v-else class="empty-state">
            <img src="@/img/no-todo.png" alt="暂无数据" />
            <p>你已完成所有待办项!</p>
        </div>
    </div>
    <el-dialog v-model="detailVisible" title="详情" width="50%">
        <detail :row="currentRow" @close="detailVisible = false" />
    </el-dialog>
</template>

<script setup>
    import { GetMyTodoList, flowNeed, flowBug, GetMyDoneList, GetMyCreateList } from '@/api/project.js'
    import { formatTime } from '@/utils/format.js'
    import { onMounted, ref, onUnmounted, watch } from 'vue'
    import { ArrowRight } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import mitt from '@/utils/mitt'
    import detail from './detail.vue'

    defineOptions({
        name: 'MyWorkIndex'
    })


    const props = defineProps({
        type: {
            type: String,
            default: 'todo'
        }
    })

    const projectList = ref([])
    const expandedProjects = ref([])
    const loading = ref(false)
    const detailVisible = ref(false)
    const currentRow = ref(null)

    const MyTodoList = () => {
        loading.value = true
        const res = GetMyTodoList()
        res.then((res) => {
            if (res.data.code === 200) {
                projectList.value = res.data.data
                expandedProjects.value = projectList.value.map(p => p.projectName)
                loading.value = false
            }
        }).finally(() => {
            loading.value = false
        })
    }

    const MyDoneList = () => {
        const res = GetMyDoneList()
        res.then((res) => {
            if (res.data.code === 200) {
                projectList.value = res.data.data
                console.log('MyDoneListprojectList.value', projectList.value);
                expandedProjects.value = projectList.value.map(p => p.projectName)
                loading.value = false
            }
        }).finally(() => {
            loading.value = false
        })
    }

    const MyCreatedList = () => {
        const res = GetMyCreateList()
        res.then((res) => {
            if (res.data.code === 200) {
                projectList.value = res.data.data
                expandedProjects.value = projectList.value.map(p => p.projectName)
                loading.value = false
            }
        }).finally(() => {
            loading.value = false
        })
    }

    watch(() => props.type, (newVal) => {
        if (newVal === 'todo') {
            MyTodoList();
        } else if (newVal === 'done') {
            MyDoneList();
        } else if (newVal === 'created') {
            MyCreatedList();
        }
    }, { immediate: true })

    // 监听刷新列表事件
    const handleRefreshList = (data) => {
        projectList.value = data;
        expandedProjects.value = data.map(p => p.projectName);
    }

    onMounted(() => {
        mitt.on('refreshTodoList', handleRefreshList);
        mitt.on('refreshDoneList', handleRefreshList);
        mitt.on('refreshCreatedList', handleRefreshList);
    })

    onUnmounted(() => {
        mitt.off('refreshTodoList', handleRefreshList);
        mitt.off('refreshDoneList', handleRefreshList);
        mitt.off('refreshCreatedList', handleRefreshList);
    })

    // 切换项目折叠状态
    const toggleProject = (projectName) => {
        const index = expandedProjects.value.indexOf(projectName)
        if (index > -1) {
            expandedProjects.value.splice(index, 1)
        } else {
            expandedProjects.value.push(projectName)
        }
    }

    //需求流转 改变状态
    const changeStatus = (row, STATE, priority) => {
        const status = {
            needId: row.id,
            status: STATE,
            priority: priority,
            comment: '',
            handlerArray: row.handlerArray,
        }
        const res = flowNeed(status)
        res.then((res) => {
            if(res.data.code === 200){
                ElMessage({
                    showClose: true,
                    message: '需求已流转',
                    type: 'success'
                }) 
                window.location.reload()
            }
        })
    }

    //缺陷流转 改变状态
    const changeBug = (row, STATE, priority) => {
        const status = {
            bugId: row.id,
            status: STATE,
            priority: priority,
            comment: '',
            handlerArray: row.handlerArray,
        }
        const res = flowBug(status)
        res.then((res) => {
            if(res.data.code === 201){
                ElMessage({
                    showClose: true,
                    message: '缺陷已流转',
                    type: 'success'
                }) 
                window.location.reload()
            }
        })
    }

    const showFinalStateMessage = (type) => {
        ElMessage({
            message: `${type}已完成`,
            type: 'success',
            duration: 2000
        })
    }

    const showDetail = (row) => {
        currentRow.value = row
        detailVisible.value = true
    }
</script>

<style lang="scss" scoped>
    .picture {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .data {
            width: 100%;
        }

        .project-section {
            width: 100%;
            margin-bottom: 30px;

            .project-title {
                font-size: 18px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 15px;
                padding-left: 10px;
                border-left: 4px solid #409EFF;
                display: flex;
                align-items: center;
                cursor: pointer;
                
                .el-icon {
                    margin-left: 10px;
                    transition: transform 0.3s;
                }
                
                .rotate-icon {
                    transform: rotate(90deg);
                }
            }

            .project-table {
                width: 100%;
                margin-bottom: 20px;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                overflow-x: hidden;
            }
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;

            img {
                max-height: 200px;
                margin-bottom: 20px;
            }

            p {
                margin: 0;
                color: #909399;
                font-size: 16px;
            }
        }
    }

    .custom-button {
        background-color: transparent !important;
    }
    
    .pop-content {
        .el-button {
            margin: 4px 0;
            width: 100%;
        }
    }
</style>